<!DOCTYPE html>
<html>
<head>
    {{template "header"}}
</head>
<body>
<script>

    let getColumns = function () {
        return [
            {
                height: 30,
                cols: [
                    {
                        view: "combo", name: "node_id", label: tr("vpe", "Node"),
                        options: "/admin/node/options", validate: webix.rules.isNotEmpty,
                        css: "nborder-input",
                    },
                    {view: "text", name: "hostname", label: tr("vpe", "Hostname"), css: "nborder-input",},
                ]
            },
            {
                height: 30,
                cols: [
                    {view: "text", name: "identifier", label: tr("vpe", "Identity"), css: "nborder-input",},
                ]
            },
            {
                height: 30,
                cols: [
                    {view: "text", name: "name", label: tr("vpe", "Name"), css: "nborder-input",},
                    {view: "text", name: "ipaddr", label: tr("vpe", "IP address"), css: "nborder-input",},
                ]
            },
            {
                height: 30,
                cols: [
                    {view: "text", name: "secret", label: tr("vpe", "RADIUS Secret"), css: "nborder-input",},
                    {view: "text", name: "coa_port", label: tr("vpe", "COA Port"), css: "nborder-input",},
                ]
            },
            {
                height: 30,
                cols: [
                    {view: "combo", name: "vendor_code", label: tr("vpe", "Vendor"), options: "/admin/vpe/vendor/options", css: "nborder-input",},
                    {view: "combo", name: "status", options:["enabled", "disabled"], label: tr("vpe", "Status"), css: "nborder-input",},
                ]
            },
            {view: "textarea", name: "remark", label: tr("vpe", "Remark")},
        ]
    }


    let openDetail = function (item) {
        let winid = "vpe.detail." + item.id
        wxui.openWindow({
            width: 720,
            height: 576,
            winid: winid,
            title: tr("vpe", "VPE Detail"),
            body: {
                rows: [
                    {
                        view: "tabbar",
                        css: "main-tabs",
                        animate: false,
                        bottomOffset: 0,
                        optionWidth: 110,
                        height: 36,
                        align: 'left',
                        multiview: true,
                        value: "vpe_detail_tab", // the initially selected tab
                        options: [
                            {"id": "vpe_detail_tab", "value": tr("vpe", "Information")},
                            {"id": "vpe_remark_tab", "value": tr("vpe", "Description")},
                        ]
                    },
                    {
                        cells: [
                            {
                                id: 'vpe_detail_tab',
                                rows: [
                                    {
                                        view: "form",
                                        paddingX: 20,
                                        scroll: "auto",
                                        elementsConfig: {
                                            marginY: 0,
                                            labelWidth: 150,
                                        },
                                        css: "detail-form",
                                        data: item,
                                        elements: [
                                            {
                                                height: 30,
                                                cols: [
                                                    {
                                                        view: "combo", name: "node_id", label: tr("vpe", "Node"),
                                                        options: "/admin/node/options", readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                    {
                                                        view: "text",
                                                        name: "hostname",
                                                        label: tr("vpe", "Hostname"),
                                                        readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                ]
                                            },
                                            {
                                                height: 30,
                                                cols: [
                                                    {
                                                        view: "text",
                                                        name: "identifier",
                                                        label: tr("vpe", "Identity"),
                                                        readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                ]
                                            },
                                            {
                                                height: 30,
                                                cols: [
                                                    {view: "text", name: "name", label: tr("vpe", "Name"), readonly: true, css: "nborder-input",},
                                                    {
                                                        view: "text",
                                                        name: "ipaddr",
                                                        label: tr("vpe", "IP address"),
                                                        readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                ]
                                            },
                                            {
                                                height: 30,
                                                cols: [
                                                    {
                                                        view: "text",
                                                        name: "secret",
                                                        label: tr("vpe", "RADIUS Secret"),
                                                        readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                    {
                                                        view: "text",
                                                        name: "coa_port",
                                                        label: tr("vpe", "COA Port"),
                                                        readonly: true,
                                                        css: "nborder-input",
                                                    },
                                                ]
                                            },
                                            {
                                                height: 30,
                                                cols: [
                                                    {
                                                        view: "combo",
                                                        name: "vendor_code",
                                                        label: tr("vpe", "Vendor"),
                                                        options: "/admin/vpe/vendor/options",
                                                        css: "nborder-input",readonly: true,
                                                    },
                                                    {view: "text", name: "status", label: tr("vpe", "Status"),readonly: true, css: "nborder-input",},
                                                ]
                                            },
                                        ],
                                    }
                                ]
                            },
                            {
                                id: "vpe_remark_tab",
                                rows: [
                                    {name: "remark", readonly: true, view: "codemirror-editor", value: item.remark, mode: "markdown"},
                                ]
                            },
                        ]
                    }
                ]
            },
        }).show()
    }


    let deleteItem = function (ids, callback) {
        webix.confirm({
            title: "Operation confirmation",
            ok: "Yes", cancel: "No",
            text: "Confirm to delete? This operation is irreversible.",
            callback: function (ev) {
                if (ev) {
                    webix.ajax().get('/admin/vpe/delete', {ids: ids}).then(function (result) {
                        if (callback)
                            callback()
                    }).fail(function (xhr) {
                        webix.message({type: 'error', text: "Delete Failure:" + xhr.statusText, expire: 2000});
                    });
                }
            }
        });
    }

    webix.ready(function () {
        let importUrl = '/admin/vpe/import'
        let exportUrl = '/admin/vpe/export'
        let tableid = webix.uid();
        let uploadid = webix.uid();
        let queryid = webix.uid()
        let reloadData = wxui.reloadDataFunc(tableid, "/admin/vpe/query", queryid)
        wxui.initUploadApi(uploadid, importUrl, reloadData);
        webix.ui({
            css: "main-panel",
            padding: 7,
            rows: [
                wxui.getPageToolbar({
                    title: tr("vpe","VPE Device"),
                    icon: "mdi mdi-server",
                    elements: [
                        wxui.getPrimaryButton(gtr("Edit"), 90, false, function () {
                            let item = $$(tableid).getSelectedItem();
                            if (item) {
                                let vitem = webix.copy(item)
                                vitem.api_pwd = ""
                                wxui.openFormWindow({
                                    width: 640,
                                    height: 640,
                                    title: tr("vpe","Edit VPE Device"),
                                    data: vitem,
                                    post: "/admin/vpe/update",
                                    callback: reloadData,
                                    elements: getColumns()
                                }).show();
                            } else {
                                webix.message({type: 'error', text: "Please select one", expire: 1500});
                            }
                        }),
                        wxui.getPrimaryButton(gtr("Clone"), 90, false, function () {
                            let item = $$(tableid).getSelectedItem();
                            if (item) {
                                let vitem = webix.copy(item)
                                vitem.id = ""
                                wxui.openFormWindow({
                                    width: 640,
                                    height: 640,
                                    title: tr("vpe","Clone VPE Device"),
                                    data: vitem,
                                    post: "/admin/vpe/add",
                                    callback: reloadData,
                                    elements: getColumns()
                                }).show();
                            } else {
                                webix.message({type: 'error', text: "Please select one", expire: 1500});
                            }
                        }),
                        wxui.getPrimaryButton(gtr("Create"), 90, false, function () {
                            wxui.openFormWindow({
                                width: 640,
                                height: 640,
                                title: tr("vpe","Create VPE Device"),
                                post: "/admin/vpe/add",
                                callback: reloadData,
                                elements: getColumns()
                            }).show();
                        }),
                        wxui.getDangerButton(gtr("Remove"), 90, false, function () {
                            let rows = wxui.getTableCheckedIds(tableid);
                            if (rows.length === 0) {
                                webix.message({type: 'error', text: "Please select one", expire: 1500});
                            } else {
                                deleteItem(rows.join(","), reloadData);
                            }
                        }),
                    ],
                }),
                wxui.getTableQueryCustomForm(queryid, [
                    {
                        cols: [
                            {
                                view: "search", id: "keyword", name: "keyword",
                                placeholder: "Keywords SN/name/description", width: 320
                            },
                            {
                                view: "button",
                                label: gtr("Query"),
                                css: "webix_transparent",
                                type: "icon",
                                icon: "mdi mdi-search-web",
                                borderless: true,
                                width: 100,
                                click: function () {
                                    reloadData()
                                }
                            }, {}
                        ]
                    }
                ]),
                wxui.getDatatable({
                    tableid: tableid,
                    url: '/admin/vpe/query',
                    columns: [
                        {
                            id: "state",
                            header: {content: "masterCheckbox", css: "center"},
                            headermenu: false,
                            adjust: true,
                            css: "center", width: 45,
                            template: "{common.checkbox()}"
                        },
                        {
                            id: "name", header: [tr("vpe","Name")], adjust: true, sort: "server",
                            template: "<a class='do_detail' href='javascript:void(0)'>#name#</a>"
                        },
                        {
                            id: "node_id", options: "/admin/node/options", adjust: true, sort: "server",
                            header: [tr("vpe","Node")],
                        },
                        {id: "identifier", header: [tr("vpe","Identity")], adjust: true, sort: "server"},
                        {id: "hostname", header: [tr("vpe","Hostname")], adjust: true, sort: "server"},
                        {id: "ipaddr", header: [tr("vpe","IP address")], adjust: true, sort: "server"},
                        {id: "secret", header: [tr("vpe","Secret")], adjust: true, sort: "server"},
                        {id: "coa_port", header: [tr("vpe","COA Port")], adjust: true, sort: "server"},
                        {id: "status", header: [tr("vpe","Status")], adjust: true, sort: "server"},
                        {id: "remark", header: [tr("vpe","Remark")], sort: "string", fillspace: true},
                        // {header: {content: "headerMenu"}, headermenu: false, width: 35}
                    ],
                    leftSplit: 1,
                    pager: true,
                    on: {
                        onItemDblClick: function (id, e, node) {
                            openDetail(this.getItem(id))
                        }
                    },
                    onClick: {
                        do_detail: function (e, id) {
                            openDetail(this.getItem(id))
                        }
                    },
                }),
                wxui.getTableFooterBar({
                    tableid: tableid,
                    actions: [
                        wxui.getIconButton(gtr("Import"), 90, "import", false, function () {
                            $$(uploadid).fileDialog({});
                        }),
                        wxui.getIconButton(gtr("Export"), 90, "download", false, function () {
                            wxui.exportData(exportUrl, 'VPE-export.csv')
                        }),
                    ],
                    callback: reloadData
                }),
            ]
        })
    })
</script>
</body>
</html>